import styled from '@emotion/styled'
import React, { MutableRefObject, useEffect, useRef, useState } from 'react'
import { Select, Form } from 'antd';
import VideoConfigure from './VideoConfigure';
import MicConfigure from './MicConfigure';
import SpeakerConfigure from './SpeakerConfigure';





interface DeviceConfigureProps {
    audioInput: MediaDeviceInfo[];
    audioOutput: MediaDeviceInfo[];
    videoInput: MediaDeviceInfo[];
    mode: 'audio' | 'video' | 'speaker';
    selectKey: string;
    defaultDevice: MediaDeviceInfo | undefined;
    onOk: () => void;
    onCancel: () => void;
    onSelect: (data: { mode: 'video' | 'audio' | 'speaker', id: string | undefined }) => void;
}

const ConfigureMain = styled.div`

`;

const VideoDevice = styled.div`
`;

const SelectedVideoDevice = styled(Select)`
`;



const DeviceConfigure = (props: DeviceConfigureProps) => {

    const { audioInput, audioOutput, videoInput, mode = 'video', selectKey = '1', defaultDevice = undefined, onCancel, onOk, onSelect } = props;

    const getConfigureView = () => {
        if (mode === 'video') return <VideoConfigure onOk={onOk} onSelect={(id: string | undefined) => onSelect({ mode, id })} onCancel={onCancel} defaultDevice={defaultDevice} videoInput={videoInput} mode={mode} selectKey={selectKey} />
        if (mode === 'audio') return <MicConfigure onOk={onOk} onSelect={(id: string | undefined) => onSelect({ mode, id })} onCancel={onCancel} defaultDevice={defaultDevice} audioInput={audioInput} mode={mode} selectKey={selectKey} />
        if (mode === 'speaker') return <SpeakerConfigure onOk={onOk} onSelect={(id: string | undefined) => onSelect({ mode, id })} onCancel={onCancel} defaultDevice={defaultDevice} audioOutput={audioOutput} mode={mode} selectKey={selectKey} />
        return null;
    }




    return (
        <>
            <ConfigureMain>
                {getConfigureView()}
            </ConfigureMain>
        </>
    )
}

export default DeviceConfigure